<template>
  <div class="dashboard-container">
    <!-- <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="dashboard-text">name: {{ name }}</div>
        </div>
      </el-col>
    </el-row> -->

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="dashboard-text">本周日用户数</div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="3" v-for="o in dauList" :key="o">
        <div class="grid-content bg-purple">
          <el-card class="box-card" style="margin-right:10px">
            <div class="text item">
              {{o.statisticsDate}}
            </div>
            <div class="dashboard-text">{{o.num}}</div>
          </el-card>
        </div>
      </el-col>
      
      <!-- <el-col :span="3">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div v-for="o in 4" :key="o" class="text item">
              {{'列表内容 ' + o }}
            </div>
          </el-card>
        </div>
      </el-col>

      <el-col :span="3">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div v-for="o in 4" :key="o" class="text item">
              {{'列表内容 ' + o }}
            </div>
          </el-card>
        </div>
      </el-col>

      <el-col :span="3">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div v-for="o in 4" :key="o" class="text item">
              {{'列表内容 ' + o }}
            </div>
          </el-card>
        </div>
      </el-col>

      <el-col :span="3">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div v-for="o in 4" :key="o" class="text item">
              {{'列表内容 ' + o }}
            </div>
          </el-card>
        </div>
      </el-col>

      <el-col :span="3">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div v-for="o in 4" :key="o" class="text item">
              {{'列表内容 ' + o }}
            </div>
          </el-card>
        </div>
      </el-col> -->

    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getDauList } from '@/api/statistics'

export default {
  name: 'Dashboard',
  data() {
    return {
      list: null,
      total: 0,
      pageSize: 15,
      pageNum: 1,
      listLoading: true,
      dauList: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData(param) {
      this.listLoading = true
      if (param == undefined) {
        param={
          // dateType: 'hour',
          pageNum: this.pageNum, 
          pageSize: this.pageSize,
          dateType: this.dateType
        }
      }
      getDauList(param).then(response => {
        this.listLoading = false
        console.log("response="+response.data)
        // this.list = response.data
        if (response.data) {
            this.list = response.data.list
            // this.dauList = new Array(7);
            var tmp = {
              statisticsDate:'----------',
              num: '-'
            }
            for (var i=0;i<7;i++) {
              if (i < this.list.length) {
                this.dauList.push(this.list[i])
              } else {
                this.dauList.push(tmp)
              }
              
            }
            console.info('============')
        }
      })
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      var param={
        pageNum:val, 
        pageSize:this.pageSize,
        dateType: this.dateType
      }
      console.log(`当前页: `+JSON.stringify(param));
      this.fetchData(param)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
